{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "7de6ccaa-cd46-47f4-8120-1bf97cd8c74f",
   "metadata": {
    "libroFormatter": "formatter-string"
   },
   "source": [
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*aMpMQKxDWg8AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"120\">\n",
    "\n",
    "# 概述 \n",
    "Libro 增强了传统 Notebook 运行的状态监控以及各种交互操作，本文为您介绍 Libro 的基础界面功能，帮助您了解 Libro 的基本使用方法。\n",
    "## 产品界面介绍\n",
    "| 界面模块 | 说明 |\n",
    "| --- | --- |\n",
    "| 上方工具栏 | 包含内核状态区、操作控制区、快捷键等。 |\n",
    "| Cell 操作区 | 罗列针对每一个独立的 Cell 可执行的操作。 |\n",
    "| Cell 编辑区 | 代码编辑窗口中的功能区域，如 Cell 衔接区、输出区、底部 Cell等。 |\n",
    "| Cell 功能介绍 | 介绍命令态和编辑态 Cell 的功能和快捷键操作。 |\n",
    "\n",
    "### 上方工具栏\n",
    "\n",
    "|序号\t|名称\t|描述|\n",
    "| --- | --- | --- |\n",
    "|①\t|内核状态区\t|展示当前服务的内核运行状态，包括正在连接、未知、忙碌、空闲四种状态。|\n",
    "|②\t|操作控制区\t|提供各种控制操作，如对代码执行、Cell 转换的操作等。|\n",
    "|③\t|快捷键面板\t|查看 Libro 快捷键目录。|\n",
    "#### 内核状态区\n",
    "Libro Notebook 采用 Python3 作为基础内核，负责运行用户输入的代码单元（Cell），管理代码执行的状态。在 Libro 的内核状态区，您可以修改内核和查看内核状态。\n",
    "\n",
    "● 内核编辑菜单\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*ZdRXRpbDPusAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "|菜单选项|\t描述|\n",
    "| --- | --- |\n",
    "|Start Preferred Kernel\t|启动设定或之前使用的首选内核。|\n",
    "|Use No Kernel\t|选择此选项不会启动任何内核，用于不执行代码的场景。|\n",
    "|Use Kernel from Preferred Session\t|使用已开启会话中的内核配置，保持环境一致性。|\n",
    "\n",
    "说明：内核（Kernel）是一个执行计算的引擎，它能够运行编程代码并返回结果。\n",
    "\n",
    "● 内核状态\n",
    "Libro 的内核状态分为正在连接、未知、忙碌、空闲。\n",
    "\n",
    "  ○ <img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*kAsfSqSVI98AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"80\">：Libro Notebook 正在与内核建立连接，发生在启动内核或者内核失去响应后尝试连接的情况。\n",
    "  \n",
    "  ○ <img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*YtBYRKbagpgAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"50\">：当前内核的状态不能确定，可能是由于通信问题或内部错误导致状态信息无法获取。\n",
    "  \n",
    "  ○ <img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*c7WaQaJrD2oAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"50\">：当前内核正在执行代码处理任务，您提交的新代码或指令将等待当前任务完成后才会被执行。\n",
    "  \n",
    "  ○ <img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*2gJgTZimxXQAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"50\">：表示内核当前没有执行任何任务，已经准备好接受新的命令和代码执行。\n",
    "  \n",
    "#### 操作控制区\n",
    "|图标|\t描述|\n",
    "| --- | --- |\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*MfLiRJshzhMAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"30\">|\t保存当前 Notebook 中 Cell 内容的改动。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*lktRT7lfOwQAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|\t按照子菜单选项，执行选中范围的 Cell，如执行全部 Cell、执行当前 Cell 等。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*En8RTorZX6wAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|定位正在执行的 Cell。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*POlrSIGHu8AAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|中断正在执行的 Cell 代码。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*_jyzTJ6S6rYAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|重启并清空所有 Cell 的输出。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*zAOnQ7FGz6YAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|\t撤销上一步操作。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*LNmFQ5h9tcAAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|重做上一步被撤销的操作。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*D2_aSqlEv-0AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|\t固定 Output 展示高度。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*0_g7R54r76YAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|根据子菜单选项，隐藏或显示代码和 Output。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*_Jj8RZIBxI8AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|清空选中 Cell 的输出。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*LwZmQoE209cAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"120\">\t|更改 Cell 类型，如 Python、Markdown 等|\n",
    "#### 分享和快捷键\n",
    "|图标\t|区域图\t|说明|\n",
    "| --- | --- | --- |\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*PeB-R4A_I80AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*f7evTZu-PUMAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"300\">|展示命令态和编辑态 Libro 的快捷键操作，提供 Magic 命令|\n",
    "### Cell 操作栏\n",
    "\n",
    "Notebook 支持针对单元格便捷执行 Cell 操作。在 Cell 右侧的操作栏中，从上至下分别是运行、上移、下移、增加、删除、更多菜单。\n",
    "\n",
    "|图标/按钮\t|描述|\n",
    "| --- | --- |\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*lktRT7lfOwQAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|运行当前选中的代码单元或重新运行代码单元。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*B3abTY564dYAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|将当前选中的代码单元上移一个位置。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*_7xxSIb7PEEAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|\t将当前选中的代码单元下移一个位置。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*zhcDTZUxYwQAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">\t|在下方增加选中类型的单元格。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*gdD1RopikGAAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|\t删除当前选中的代码单元。|\n",
    "|<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*4MZQTYYdgWwAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"36\">|提供隐藏代码和输出、复制、剪切、粘贴的功能。|\n",
    "### Cell 编辑区\n",
    "在 Notebook 代码编辑窗口中，您可以添加多个 Cell 来组织您的项目。Cell 之间的区域为衔接区，Cell 执行完毕产生的输出窗格为输出区，最后一个 Cell 底部称为 Cell 底部区。\n",
    "#### Cell 衔接区\n",
    "您可以在该区域自由添加指定类型的单元格。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*Is6dSKX1RqgAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "![](https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*lzCkQonJki0AAAAAAAAAAAAADvyTAQ/original)\n",
    "\n",
    "说明：如果您选中的 Cell 后无其他单元格，可以直接在底部通过指定按钮添加对应类型的单元格。详情请参见底部 Cell。\n",
    "\n",
    "#### Cell 输出区\n",
    "支持在单元格下方查看执行此 Cell 后的运行时间和运行结果。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*poL9SoeA1fgAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "注意：目前仅支持执行 Python Cell 和 Prompt Cell 并产生输出内容，其余均为说明性、展示性 Cell。\n",
    "#### Cell 固定 Output 高度\n",
    "如果输出内容较长，您可以选择固定或取消输出窗口的高度，以获取最佳视图体验。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*gbuURbBpGU4AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "\n",
    "#### 底部 Cell \n",
    "实验文件中最后一个 Cell 的底部提供显式添加指定类型单元格的按钮。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*ZrueRbRAObIAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "说明：同时，支持在 Cell 衔接区或 Cell 操作栏添加单元格，通过 Cell 控制区的类型转换来切换单元格类型。\n",
    "\n",
    "## 交互操作介绍\n",
    "支持在上方工具栏右侧，通过查看快捷键，查看或搜索产品内所有快捷键功能和 Notebook Magic 命令，以下为您介绍几种常用的操作：\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*Yp0cQrdGWxsAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "<br/>\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*bpLiSJu46MgAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"300\">\n",
    "\n",
    "\n",
    "### 命令态 | 编辑态\n",
    "Notebook 将针对操作功能分为命令态和编辑态。\n",
    "\n",
    "● 在编辑态下单击代码编辑页面空白处或快捷键 Esc 进入命令态，当前选中的 Cell 边框为蓝色。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*aIQKRbN3t2wAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "● 在命令态时通过快捷键 Enter 进入编辑态或直接单击 Cell 编辑框。当前选中的 Cell 边框为蓝色高亮显示。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*mnleS7wj4tsAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "注意：Markdown 类型的 Cell 由命令态进入编辑态需要双击鼠标左键。\n",
    "\n",
    "### 命令态\n",
    "在命令态下，支持以下常见功能。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*72NLRaJqJhMAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "#### 多选 Cell\n",
    "被选中的 Cell 背景为蓝色阴影，支持选中多个单元格以进行批量操作，如批量执行（Ctrl/Command+Enter）和批量复制(C)、粘贴(V)等，您可以自由搭配使用。\n",
    "\n",
    "|快捷键|\t效果|\n",
    "| --- | --- |\n",
    "|Shift+Up/Shift+K|\t向上选中多个 Cell，单击 Up/K N 次，则向上选中 N 个 Cell。|\n",
    "|Shift+Down/Shift+J|\t向下选中多个 Cell，单击 Down/J N次，则向下选中 N 个 Cell。|\n",
    "\n",
    "说明：另外，您可以按住 shift，选中一个 Cell 并以此为基准，单击另一个目标 Cell 的左侧区域，即可向上或向下选中该范围内的所有 Cell。\n",
    "\n",
    "#### 转换 Cell\n",
    "在命令态下，选中单元格，通过快捷键可以实现 Markdown 到 Python 类型的互相转换。\n",
    "\n",
    "|快捷键|\t效果|\n",
    "| --- | --- |\n",
    "|M\t|将 Cell 转换为 Markdown 类型，快捷键1/2/3/4/5/6分别支持标题1/2/3/4/5/6。|\n",
    "|Y\t|将 Cell 转换为 Python 类型。|\n",
    "\n",
    "#### 合并 Cell\n",
    "在命令态下，支持通过快捷键合并当前选中 Cell 和相邻上一个或下一个 Cell 的内容。\n",
    "\n",
    "|快捷键|\t效果|\n",
    "| --- | --- |\n",
    "Ctrl/Command+Shift+M\t合并相邻的下一个 Cell。\n",
    "\n",
    "说明：支持多选 Cell，并通过shift + m 进行批量合并。\n",
    "\n",
    "#### 执行 Cell\n",
    "在命令态下，您可以通过快捷键启动 Cell 执行，支持以下执行方式：\n",
    "\n",
    "|快捷键|\t效果|\n",
    "| --- | --- |\n",
    "|Ctrl/Command+Enter|\t执行当前 Cell。|\n",
    "|Shift+Enter|\t执行当前 Cell 并选中下一个单元格。|\n",
    "|Alt/Opt+Enter|\t执行当前 Cell 并向下插入同类型单元格。|\n",
    "\n",
    "#### 拖拽 Cell\n",
    "当您将鼠标移至 Cell 框左侧，出现样式<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*ENB3SaW-qnkAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"30\">\n",
    "时，可以对当前 Cell 进行拖拽。\n",
    "\n",
    "● 拖拽单个 Cell（不区分命令态和编辑态）\n",
    "当您将鼠标移至目标 Cell 框左侧，出现样式时，即可进行拖拽。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*W_8dSYl4LfcAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "<br/>\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*9a2PSqgBtZMAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "\n",
    "说明：拖拽时，蓝色横条作为定位标记，表示拖拽至蓝色横条下方。\n",
    "● 拖拽多个 Cell \n",
    "在命令态下，多选 Cell 后，当您将鼠标移至 Cell 框左侧，出现样式时，可以同时拖拽多个 Cell。\n",
    "\n",
    "### 编辑态\n",
    "在编辑态下，支持以下常见功能。\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*YGIpQ6N62F4AAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "#### 切分 Cell\n",
    "支持将一个单元格中的内容切分为不同的段，分别放入不同的单元格中。\n",
    "\n",
    "<table>\n",
    "<thead>\n",
    "<tr>\n",
    "<th>快捷键</th>\n",
    "<th>支持方式</th>\n",
    "<th >效果</th>\n",
    "</tr>\n",
    "</thead>\n",
    "<tbody>\n",
    "<tr>\n",
    "<td rowspan=\"2\">Ctrl/Command+Shift+-</td>\n",
    "<td>通过光标定位分割点</td>\n",
    "<td >光标前后的内容被分割开来，分别放入两个单元格中。</td>\n",
    "</tr>\n",
    "<tr>\n",
    "<td>选中内容的前后作为分割点</td>\n",
    "<td>选中内容的前后都作为分割点，原单元格内容被切分为三段，分别放入三个单元格。</td>\n",
    "</tr>\n",
    "</tbody>\n",
    "</table>\n",
    "\n",
    "#### 光标移动\n",
    "|快捷键\t|功能|\n",
    "| --- | --- |\n",
    "|Ctrl/Command + Left\t|光标移至当前行的行首|\n",
    "|Ctrl/Command + Right\t|光标移至当前行的行尾|\n",
    "|Ctrl/Command + Up\t|光标移至文件的开始处（文件首）|\n",
    "|Ctrl/Command + Down\t|光标移至文件的结束处（文件尾）}\n",
    "\n",
    "### 左侧长条\n",
    "单击 Cell 左侧的长条支持隐藏与显示长条所对应的 Cell 区域部分。\n",
    "#### 隐藏与显示 Cell 输入部分\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*UgaTRIZNTUEAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "\n",
    "#### 隐藏与显示 Cell 输出部分\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*rcH3SLEe2KIAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "\n",
    "## Cell 介绍\n",
    "### Python Cell\n",
    "Python Cell 是 Notebook 中编辑和调试 Python 代码的最小单元，主要包含以下使用功能：\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*CtyWRYVA00YAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "|功能\t|说明|\n",
    "| --- | --- |\n",
    "|代码编写|\t提供用于编写源代码的编辑区域，支持语法高亮和自动代码补全等。|\n",
    "|单元调试|\t允许逐单元(cell)逐行调试代码，帮助识别代码中的逻辑错误和异常。|\n",
    "|输出调试窗格|\t显示代码执行的输出结果，包括打印的文本、图形、错误信息等。|\n",
    "|代码生成\t|根据用户输入自动生成代码片段，提高开发效率。|\n",
    "|使用框架和库\t|内置丰富类库，支持导入和使用多种 Python 框架和库，扩展代码功能。|\n",
    "\n",
    "### Markdown Cell\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*p0zgS5zG2XMAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "|功能\t|说明|\n",
    "| --- | --- |\n",
    "|文本编辑\t|提供文本输入区域，用于编写 Markdown 格式的文本内容。|\n",
    "|格式化展示\t|在编辑完成后，支持渲染 Markdown 为格式化的 HTML 展示。|\n",
    "|插入元素\t|支持插入链接、图片、表格、列表等 Markdown 元素。|\n",
    "|文档结构化\t|使用 Markdown 语法创建有结构的文档，如标题、子标题、段落。|\n",
    "|代码块支持\t|支持插入代码块，并对不同编程语言进行语法高亮。|\n",
    "\n",
    "说明：此外，支持基于标题的 Markdown Cell 进行隐藏与现实，帮助您更好的组织与查看 Notebook\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*8hz6SrDmuxcAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"800\">\n",
    "\n",
    "# Github：\n",
    "https://github.com/difizen/libro\n",
    "\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*n-QdTpkS0KkAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"180\">\n",
    "\n",
    "# 联系我们：\n",
    "<img src=\"https://mdn.alipayobjects.com/huamei_zabatk/afts/img/A*oNhKSblcJfIAAAAAAAAAAAAADvyTAQ/original\" alt=\"alt text\" width=\"180\">\n"
   ]
  }
 ],
 "metadata": {},
 "nbformat": 4,
 "nbformat_minor": 5
}
